<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
      <el-breadcrumb-item>原材料添加</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">

      <div style="float: left">
        <el-button @click="goafter" type="info">返回上一级</el-button>
      </div>
      <div align="center" class="d1" style="color: mediumblue"><h3>原材料添加界面</h3></div>
      <div align="center" class="d2">
        <el-form :rules="rules" :ref="ruleForm" :model=" materiaForm" label-width="70px">
          <el-row :gutter="100">
            <el-col :span="11">
              <el-form-item label="编号" prop="code" label-width="110px">
                <el-input v-model="materiaForm.code" ></el-input>
              </el-form-item>
              <el-form-item label="名称" prop="name" label-width="110px">
                <el-input v-model="materiaForm.name" ></el-input>
              </el-form-item>
              <el-form-item label="硬度" prop="hardness" label-width="110px">
                <el-input v-model="materiaForm.hardness" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="化学元素叫法" prop="chemical" label-width="110px">
                <el-input v-model="materiaForm.chemical" ></el-input>
              </el-form-item>
              <el-form-item label="密度" prop="density" label-width="110px">
                <el-input v-model="materiaForm.density" ></el-input>
              </el-form-item>
              <el-form-item label="单价" prop="price" label-width="110px">
                <el-input v-model.number="materiaForm.price" ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="15">
              <el-form-item label="材料介绍" label-width="110px">
                <el-input type="textarea" v-model="materiaForm.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="dialog-footer" slot="footer">
          <el-button @click="goafter">取 消</el-button>
          <el-button @click="tj(ruleForm)" type="primary">确 定</el-button>
        </div>
      </div>
    </el-card>

  </div>

</template>

<script>

  export default {
    name: "addaddmaterial",
    data() {
      return {
        materiaForm: {},
        ruleForm: {},
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入编号', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
          ],
          chemical: [
            {required: true, message: '请输入化学元素叫法', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
          ],
          density: [
            {required: true, message: '请输入密度', trigger: 'blur'},
          ],
          hardness: [
            {required: true, message: '请输入硬度', trigger: 'blur'},
          ],
          remarks: [
            {required: true, message: '请输入材料介绍', trigger: 'blur'}
          ],
          price: [
            {required: true, message: '请输入单价', trigger: 'change'},
            {type: 'number', message: '请输入数字类型', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      goafter() {
        this.$router.go(-1)
      },
      tj: function (ruleForm) {//添加原材料
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.$http.post("/material/save", this.materiaForm).then((res) => {
              if (res.data.success) {
                this.$message.success(res.data.message);
                this.$router.push('/material');//跳转到原材料管理
              } else {
                this.$message.error(res.data.message);
              }
            });
          } else {
            this.$message.error('Fail!');
          }
        })
      },
      getCv: function (id) {//查询当前id的用户明细
        this.$http.get("/material/get/" + id).then((res) => {
          if (res.data.success) {
            this.materiaForm = res.data.result //赋值
            this.userFormVisible = true //显示dialog框
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
    },
    mounted() {
      let id = this.$route.query.id
      if (id != null) {
        this.getCv(id)
      }
    }
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
